<template>
	<view class="page">
		<!-- 订单tab -->
			<u-sticky>
				<view class="order-tab">
					<view class="tab" :class="{'action':OrderType==-1}" @click="onOrderTab(-1)">
						<text>全部</text>
						<image src="../../static/img/order-line.png" class="line"></image>
					</view>
					<view class="tab" :class="{'action':OrderType==0}" @click="onOrderTab(0)">
						<text>待付款</text>
						<image src="../../static/img/order-line.png" class="line"></image>
					</view>
					<view class="tab" :class="{'action':OrderType==1}" @click="onOrderTab(1)">
						<text>待使用</text>
						<image src="../../static/img/order-line.png" class="line"></image>
					</view>
					<view class="tab" :class="{'action':OrderType==2}" @click="onOrderTab(2)">
						<text>待收货</text>
						<image src="../../static/img/order-line.png" class="line"></image>
					</view>
					<view class="tab" :class="{'action':OrderType==3}" @click="onOrderTab(3)">
						<text>已完成</text>
						<image src="../../static/img/order-line.png" class="line"></image>
					</view>
				</view>
			</u-sticky>
		
		<!-- 订单列表 -->
		<mescroll-body @init="mescrollInit" height="95%" @down="downCallback" :empty="empty" @up="upCallback">
			<view class="order-list"  v-if="goodsList.length">
				<view class="list" v-for="(item,index) in goodsList" @click="onOrderList(item.id)" :key="index">
					<view class="title-status">
						<view class="title">
							<text>订单号:{{item.order_sn}}</text>
						</view>
						<view class="status" v-if="item.status==0">
							<text class="other">待付款</text>
						</view>
						<view class="status" v-if="item.status==1">
							<text >待使用</text>
						</view>
						<view class="status" v-if="item.status==2">
							<text>待收货</text>
						</view>
						<view class="status" v-if="item.status==3">
							<text>已完成</text>
						</view>
					</view>
					<view class="goods-list">
						<view class="goods">
							<view class="thumb">
								<image :src="item.imglogo" mode=""></image>
							</view>
							<view class="item box-1">
								<view class="goods-name">
									<text class="two-omit">{{item.title}}</text>
								</view>
								<view class="goods-gg">{{item.desc}}</view>
								<view class="goods-price flex-box">
									<view class="box-1">
										<text class="min">￥</text>
										<text class="max">{{item.price}}</text>
									</view>
									
									<view class="">
										x{{item.num || 1}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-box">
						<view class="item-mess box-1" style="color:#aaa;font-size:26rpx;">
							下单时间：{{item.create_time}}
						</view>
						<view class="item-price-box">
							实付款 ¥ 
							<text class="item-price">
								{{item.total_price}}
							</text>
						</view>
					
					</view>
					<view class="status-btn">
						<view class="btn"  v-if="item.status==0" @tap.stop="cancelFun(item.id,index)">
							<text>取消订单</text>
						</view>
						<view class=" btn-count" v-if="item.status == 0" @tap.stop="confirmmeet(item.id)">
							立即支付
						</view>
						<view class="btn see-btn" v-if="item.flag=='service' && item.status>0" @click.stop="toMycode(item.id)">
							查看券码
						</view>
						<view class="btn" v-if="item.status >= 2 && item.evaluate_status == 0" @click.stop="onEvaluate(item.id)">
							立即评价
						</view>
						<view class="btn see-btn" v-if="item.status==2" @click.stop="confirmGoods(item.id,index)">
							确认收货
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<u-empty mode="data" marginTop="100" text="暂无订单数据"></u-empty>
			</view>
		</mescroll-body>
		<u-popup :show="showCond" bgColor="transparent" mode="center">
			<view class="p-content">
				<image src="@/static/img/icon-evaluate.png" class="top-img"></image>
				<view class="bttom-text">
					<view class="fv-xing flex-box">	
						<u-rate count="5" size="26" active-color="#D02227" inactive-color="#b2b2b2" v-model="value"></u-rate>
					</view>
					<view class="text">期待您的5星好评 <br> <text class="c-text">您的鼓励能让我们做的更好!！</text></view>
					<view class="btn-img" @click="toService()"  >给个好评</view>
				</view>
				<view class="close-btn" @click="showCond=false">
					<u-icon  name="close-circle" size="28" color="#fff"></u-icon>
				</view>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				empty:{
					use : true ,
					icon : null ,
					tip : "暂无相关数据",
					btnText : "",
					fixed: false,
					top: "100rpx",
					zIndex: 99
				},
				comm_img_url:'',
				OrderType: 0,
				goodsList:[],
				page:1,
				tab:-1,
				pageSize:10,
				devaluate:0,
				showCond:false,
				value:0,
			};
		},
		onLoad(params) {
			this.OrderType = params.type;
			this.comm_img_url = this.$c.appImg
		},
		methods:{
			//显示评价弹窗
			onEvaluate(item){
				this.devaluate = item
				this.showCond = true
			},
			//确认收货
			confirmGoods(id,index){
				uni.showModal({
					title: '温馨提醒',
					confirmText: "确定",
					confirmColor:'#D02227',
					content: "您确定要收货吗？",
					success: res => {
						if (res.confirm) {
							this.$u.api.ordersSub({
								order_id: id
							})
							.then(res => {
								console.log(res);
								this.$u.toast(res.msg)
								if (res.status) {
									this.goodsList.splice(index, 1)
								}
							})
							.catch(err => {
								console.log(err);
							})
						}
					}
				})
			},
			//立即评价
			toService(){
				this.$u.api.couponEvaluate({order_id:this.devaluate,num:this.value}).then(res => {
						this.showCond = false
						this.$u.toast(res.msg)
					})
					.catch(err => {
						console.log(err);
					})
				
			},
			//查看券码
			toMycode(id){
				uni.navigateTo({url:`/pages/sub/myCode/myCode?id=${id}`})
			},
			// 付款
			confirmmeet(id,item){
				let target = navigator.userAgent.toLowerCase();
					  let isWeixin = /micromessenger/.test(target);
					  console.log('是否在微信中打开的',isWeixin);
					if(isWeixin){
						  let _data = {
							  order_id:id
						  };
						  uni.showLoading({
						  	title:"正在换起支付"
						  })
						  
						  let _that = this
					  this.$u.api.ordersPay(_data)
						  .then(res=>{
							this.flag = true
							 uni.hideLoading()
							if(res.status){
							  WeixinJSBridge.invoke(
								  'getBrandWCPayRequest', res.msg.pay_info,
								  function(res){
									if(res.err_msg == "get_brand_wcpay_request:ok" ){
									  // 使用以上方式判断前端返回,微信团队郑重提示：
									  //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
									  // _that.$u.toast('支付成功')
                    uni.showToast({
                      icon:"success",
                      title:'支付成功'
                    })
									  setTimeout(()=>{
										  uni.redirectTo({
											url:`/pages/OrderDetails/OrderDetails?id=${id}`
										  })
									  },1500)
									  return
									}
									if(res.err_msg == "get_brand_wcpay_request:cancel" ){
									  // 使用以上方式判断前端返回,微信团队郑重提示：
									    _that.$u.toast('您已取消支付！')
										return
									}
								  });
							  return
							}else{
								_that.$u.toast(res.msg)
							}
				
						  })
						  .catch(err=>{
							uni.hideLoading()
							console.log('err---',err);
							this.flag = true
						  })
						  
				  }else{
					  this.$u.toast('请在微信客户端打开链接')
				  }
					
			},
			// 取消订单
			cancelFun(para,index) {
				uni.showModal({
					title: '温馨提醒',
					confirmText: "确定",
					content: "确定取消该订单吗？",
					confirmColor:'#D02227',
					success: res => {
						if (res.confirm) {
							this.$u.api.ordersCancel({
									order_id: para
								})
								.then(res => {
									console.log(res);
									uni.showToast({
										icon: 'none',
										title: res.msg
									})
									if (res.status) {
										this.goodsList.splice(index, 1)
									}
								})
								.catch(err => {
									console.log(err);
								})
						}
					}
				})
			},
			  /*上拉加载的回调*/
			  upCallback(page) {
			    //联网加载数据
				let _this = this
			    this.$u.api.ordersList({tab:this.OrderType,page:page.num}).then(res=>{
					  // console.log(res,'商品列表')
			    	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			    	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
			    
			    	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			    	this.mescroll.endByPage(this.pageSize, res.msg.totalPage); //必传参数(当前页的数据个数, 总页数)
			    
			    	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
			    	//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
			    
			    	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
			    	// this.mescroll.endSuccess(res.msg.length, false); //必传参数(当前页的数据个数, 是否有下一页true/false)
			      
			    	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
			    	// this.mescroll.endSuccess(res.list.length);
					if(page.num == 1){_this.goodsList = [];} //如果是第一页需手动制空列表
					_this.goodsList =  _this.goodsList.concat(res.msg.list); //如果是第一页需手动制空列表
					// this.goodsList =  res.msg.list; //如果是第一页需手动制空列表
					return false
			    // 	//设置列表数据
			//     	if(this.page == 1||this.page<res.msg.totalPage){
					// 	this.goodsList =  res.msg.list; //如果是第一页需手动制空列表
					// }else{
					// 	this.goodsList = this.goodsList.concat(res.msg.list); // 注意不是this.msgList.concat
					// }
			    }).catch(()=>{
			    	//联网失败, 结束加载
			    	this.mescroll.endErr();
			    })
			  },
			// 订单列表
			
			/**
			 * 返回点击
			 */
			onBack(){
				uni.navigateBack();
			},
			/**
			 * 订单tab点击
			 */
			onOrderTab(type){
				this.OrderType = type;
				 this.mescroll.resetUpScroll();
			},
			/**
			 * 订单列表点击
			 */
			onOrderList(id){
				uni.navigateTo({
					url: '/pages/OrderDetails/OrderDetails?id='+id,
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'MyOrderList.scss';
</style>
